<template>
    <div>
        <van-cell-group>
            <van-cell title="搜索结果" icon="wap-nav" />
        </van-cell-group>
        <div class="item-search" v-for="(item,index) in list" :key="index" @click="showDetail(item.id)">
            <!-- <img  v-lazy="item.images.small" >-->
            <div v-lazy:background-image="item.images.small" />
            <h5>影片名称：{{item.title}}</h5>
            <p>
                类别：
                <van-tag :type="tags[index]" v-for="(val,index) in item.genres" :key="index">{{val}}</van-tag>
            </p>
            <p>年代：{{item.year}}</p>
            <p>豆瓣评分：{{item.rating.average}}</p>
            <p class="star">
                <van-rate v-model="item.rating.average" :count="10" />
            </p>
            <p>
                主演：
                <van-tag mark :type="tags[index]" v-for="(val,index) in item.casts" :key="index">
                    {{val.name}}
                </van-tag>
            </p>
        </div>
    </div>
</template>
<script>
import Vue from "vue";
import { searchMovie } from "../../api/api.js";

import { Cell, CellGroup } from "vant";
import { Lazyload } from "vant";
import { Rate } from "vant";
import { Tag } from "vant";
import { Toast } from "vant";
Vue.use(Cell)
    .use(CellGroup)
    .use(Lazyload)
    .use(Rate)
    .use(Tag)
    .use(Toast);
export default {
    data() {
        return {
            title: "搜索电影",
            keyword: this.$route.query.keyword,
            list: [],
            tags: ["danger", "success", "primary"]
        };
    },
    created() {
        if(this.keyword==''){
            Toast('请输入搜索关键字');
            this.$router.go(-1);
            return ;
        }
        searchMovie(this.keyword).then(res => {
            this.list = res;
        });
    },
    methods:{
         showDetail(movieId) {
             console.log(movieId);
            this.$router.push({
                path: "/moviedetail",
                query: { id: movieId }
            });
        }
    }
};
</script>
<style lang="less">
.item-search {
    padding: 4px;
    border-bottom: 1px solid #ccc;
    div {
        height: 200px;
        width: auto;
        background-position: center;
        background-size: cover;
    }
    .star {
        height: 20px;
    }
}
</style>


